<template>
  <div class="header">
    <div class="left">
      <slot name="left">
        <i class="el-icon-back back" @click="back"></i>
        <el-button type="primary" size="small" round @click="back">返回</el-button>
      </slot>
    </div>
    <div class="center">
      <slot name="center"></slot>
    </div>
    <div class="right">
      <slot name="right">
        <el-row :gutter="10">
          <!--          <el-col :span="12">-->
          <!--            <el-badge :value="10" class="item">-->
          <!--              <i class="el-icon-chat-dot-round" style="font-size: 40px;"></i>-->
          <!--            </el-badge>-->
          <!--          </el-col>-->
          <el-col :span="12">
            <div class="parent">
              <div class="child">
                <el-dropdown trigger="click" style="height: 50px;" @command="handleCommand">
                  <span class="el-dropdown-link">
                    <el-avatar :size="50"
                               :src="'../../static/register/teacher.svg'"></el-avatar>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-setting" command="setting">个人设置</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-edit" command="editPassword">修改密码</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-switch-button" command="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </el-col>
        </el-row>
      </slot>
    </div>

    <!-- 退出确认-->
    <el-dialog
      title="提示"
      :visible.sync="ensureLogout"
      width="30%">
      <i class="el-icon-warning-outline"></i>
      <span>确认是否退出</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ensureLogout = false">取 消</el-button>
        <el-button type="primary" @click="logout">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改密码-->
    <el-dialog title="修改密码" :visible.sync="editPasswordVisible" center width="604px">
      <el-form :model="passwordForm" :rules="rules" ref="passwordForm" label-width="100px">
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="passwordForm.pass" autocomplete="off"
                    placeholder="请输入新密码" show-passwordForm></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
          <el-input type="password" v-model="passwordForm.checkPass" autocomplete="off"
                    placeholder="请确认新密码" show-passwordForm></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetEditPaaForm('passwordForm')">取 消</el-button>
        <el-button type="primary" @click="submitEditPass('passwordForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PublicHeader',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.passwordForm.checkPass !== '') {
          this.$refs.passwordForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ensureLogout: false,
      editPasswordVisible: false,
      passwordForm: {
        pass: '',
        checkPass: ''
      },
      rules: {
        pass: [
          {validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {validator: validatePass2, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleCommand (command) {
      switch (command) {
        case 'setting':
          if (this.$route.fullPath !== '/userSetting') {
            this.$router.push('/userSetting')
          }
          break
        case 'editPassword':
          this.editPasswordVisible = true
          break
        case 'logout':
          this.ensureLogout = true
          break
      }
    },
    logout () {
      this.ensureLogout = false
      this.$store.dispatch('accountLogoutSubmit').then(() => {
        this.$router.push('/')
      })
    },
    back () {
      this.$router.go(-1)
    },
    submitEditPass (passwordForm) {
      this.$refs[passwordForm].validate((valid) => {
        if (valid) {
          const id = this.$store.getters.userInfo.id
          const dto = Object.assign({password: this.passwordForm.pass}, {id: id})

          this.$store.dispatch('updatePassword', dto).then(resp => {
            if (resp.code === 200) {
              this.editPasswordVisible = false
              this.$store.commit('ACCOUNT_LOGOUT')
              this.$router.push('/')
            }
          })
        } else {
          return false
        }
      })
    },
    resetEditPaaForm (formName) {
      this.editPasswordVisible = false
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.header {
  margin: 0 2%;
  display: flex;
}

.left, .center, .right {
  height: 60px;
  line-height: 60px;
  color: #409EFF;
}

.left, .right {
  width: 100px;
}

.center {
  flex: 1;
}

.parent {
  height: 60px;
  display: flex;
  align-items: center;
}

.child {
  height: 50px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.back {
  font-size: 35px;
  vertical-align: middle;
  cursor: pointer;
}
</style>
